import React, { Component, useState, useEffect } from 'react';
import { Line, RangeBar } from '@ant-design/charts';

export default class RangerBar extends Component {
  render() {
    const data = [
      {
        type: '分类一',
        values: [76, 100]
      },
      {
        type: '分类二',
        values: [56, 108]
      },
      {
        type: '分类三',
        values: [38, 129]
      },
      {
        type: '分类四',
        values: [58, 155]
      },
      {
        type: '分类五',
        values: [45, 120]
      },
      {
        type: '分类六',
        values: [23, 99]
      },
      {
        type: '分类七',
        values: [18, 56]
      },
      {
        type: '分类八',
        values: [18, 34]
      }
    ];
    const config = {
      title: {
        visible: true,
        text: '为区间条形图配置label样式'
      },
      description: {
        visible: true,
        text: '使用style配置项配置label整体样式\uFF0C同时支持通过leftStyle和rightStyle分别配置label样式\u3002'
      },
      data,
      xField: 'values',
      yField: 'type',
      color: 'l(0) 0:#3e5bdb 1:#dd3121',
      columnStyle: { fillOpacity: 0.8 },
      label: {
        visible: true,
        leftStyle: { fill: '#3e5bdb' },
        rightStyle: { fill: '#dd3121' }
      }
    };

    const lineData = [
      { year: '1991', value: 3 },
      { year: '1992', value: 4 },
      { year: '1993', value: 3.5 },
      { year: '1994', value: 5 },
      { year: '1995', value: 4.9 },
      { year: '1996', value: 6 },
      { year: '1997', value: 7 },
      { year: '1998', value: 9 },
      { year: '1999', value: 13 }
    ];
    const lineConfig = {
      data: lineData,
      title: {
        visible: true,
        text: '带数据点的折线图'
      },
      xField: 'year',
      yField: 'value'
    };
    return (
      <div>
        <RangeBar {...config} />
        <Line {...lineConfig} />
      </div>
    );
  }
}
